<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    ringData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      const data = [
        {
          name: '当月旅游人数',
          rise: 0.33,
          unit: '万人次',
          value: 1000
        },
        {
          name: '本年旅游人数', value: 7000, unit: '万人次'
        }
      ]
      var dataset = []
      var dataname = ''
      for (var i = 0; i < data.length; i++) {
        dataname = data[i].unit
        dataset.push({
          value: data[i].value,
          name: data[i].name,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        })
      }
      var dataout = []
      var myMap = {}
      var colors = ['#0a8cff', '#bb4dff', '#42e7e3']
      for (var x = 0; x < dataset.length; x++) {
        myMap[dataset[x].name] = dataset[x].value + dataname
        dataout.push({
          value: dataset[x].value,
          name: dataset[x].name,
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: '#61bad3',
              borderType: 'dashed'
            }
          }
        })
      }
      var radius = [38, 55]
      var result = {
        legend: {
          top: '5%',
          right: '1%',
          orient: 'horizontal',
          icon: 'pin',
          textStyle: {
            color: '#94e5ff',
            fontSize: 10
          },
          formatter: function(a, b, c) {
            let result = a
            result += myMap[a]
            return result
          }
        },
        graphic: [
          { // 图形中间文字
            type: 'text',
            left: 'center',
            top: '52%',
            style: {
              text: dataset[1].value,
              textAlign: 'center',
              fill: '#4dc6fe',
              fontSize: 20
            }
          },
          { // 图形中间文字
            type: 'text',
            left: 'center',
            top: '62%',
            style: {
              text: dataname,
              textAlign: 'center',
              fill: '#94e5ff',
              fontSize: 14
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: false,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  width: '20%',
                  height: '30%',
                  itemStyle: {
                    normal: {
                      label: {
                        formatter: function(params) {
                          return 'other\n' + params.value + '%\n'
                        },
                        textStyle: {
                          baseline: 'middle'
                        }
                      }
                    }
                  }
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        labelLine: {
          show: false
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '60%'],
            radius: ['40%', '52%'],
            x: '0%', // for funnel
            color: colors,
            data: dataset,
            labelLine: {
              show: false
            }
          },
          {
            type: 'pie',
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            center: ['50%', '60%'],
            radius: ['60%', '60%'],
            color: colors,
            label: {
              normal: {
                show: false
              }
            },
            data: dataout
          }
        ]
      }

      this.chart.setOption(
        result
        , true)
    }
  }
}
</script>

<style>

</style>
